<template>
  <div class="px-4 h-full overflow-hidden">
    <div class="flex justify-between items-center py-2">
      <a-form class="flex flex-wrap">
        <a-form-item>
          <a-input-search v-model:value="searchKey" class="w-64" placeholder="姓名/助记码/住院号" @keyup.enter="getData" @search="getData" />
        </a-form-item>
        <a-form-item label="出院日期" class="ml-4">
          <a-range-picker v-model:value="dateRange" class="w-[320px]" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="getData" />
        </a-form-item>
      </a-form>
      <BaseExport
        type="住院"
        name="已出院"
        code="000102"
        :search-params="{ status: store.tabsKey, bqbh: store.areaCode, pyjm: searchKey, stdate: dateRange?.[0], eddate: dateRange?.[1] }"
        @click="open = true"
        >导出</BaseExport
      >
    </div>
    <BaseTable
      column-code="000102"
      :exclude-columns="['action']"
      :loading="loading"
      :scroll="{ x: 2300 }"
      :data-source="tableData"
      :pagination="pagination"
      fill
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'xh'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'brName'">
          <InPatientPopover v-model:open="record.openPopover" :patient-info="record" @change="getData" @click="record.openPopover = !record.openPopover">
            <div class="cursor-pointer text-primary hover:underline">{{ record.brName }}</div>
          </InPatientPopover>
        </template>
      </template>
    </BaseTable>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import BaseTable from '@/components/BaseTable'
import useStore from '../../store'

const store = useStore()
const searchKey = ref('')
const dateRange = ref([dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')])
const { loading, tableData, pagination, getData } = useTable({
  url: '/inp/zydj/getInpRecordList',
  immediate: true,
  pagination: true,
  formatParams: () => {
    return {
      status: store.tabsKey,
      bqbh: store.areaCode,
      pyjm: searchKey.value,
      stdate: dateRange.value?.[0],
      eddate: dateRange.value?.[1]
    }
  },
  onSuccess: () => {
    tableData.value.forEach((item) => (item.openPopover = false))
  }
})
</script>
